<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="./material.min.css">
  <script src="../dist/que.js"></script>
</head>
<body>
<div id="app">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">

        <div class="card text-center">
          <div class="card-header">
            观察变化
          </div>
          <div class="card-block">
            <h1 class="card-title">{{'hi,' + test.test2.value2}}</h1>
            <input type="text" q-model="test.test2.value2" class="form-control m-md align-content-md-center" placeholder="输入字符">
            <button on-click="alertHello" class="btn btn-primary">触发alertHello</button>
          </div>
          <div class="card-footer text-muted">
            test
          </div>
        </div>

      </div>
      <div class="col-sm-6">

        <div class="card text-center">
          <div class="card-header">
            自动增加的值
          </div>
          <div class="card-block">
            <h1 class="card-title">{{count}}</h1>
            <button on-click="handle" class="btn btn-primary">{{toggle ? '暂停' : '恢复'}}</button>
          </div>
          <div class="card-footer text-muted">
            test
          </div>
        </div>

      </div>
    </div>
  </div>



</div>
<script>
  const app = new Que({
    el: '#app',
    data: () => ({
      message: 'que!',
      count: 1,
      toggle: true,
      test: {
        value: 2,
        test2: {
          value2: 3,
        },
      },
    }),
    created (){
      this.test.test2.value2 = 100
//      setInterval(() => {
//        this.test.test2.value2 ++
//        this.toggle && this.count ++
//      }, 700)
    },
    method: {
      alertHello: function (){
        alert('hello')
      },
      handle: function (){
        this.toggle = !this.toggle
      }
    }
  })
</script>
</body>
</html>